<template>
  <div class="feature">
    <div class="zan">
      <i class="fa fa-heart"
         :class="{red : zanData.isZan}"
         @click="dianZan(zanData.id)"></i>
      <!--<slot name="zan-text">点赞</slot>-->
      <span>{{zanData.count}}</span>
      <!--<slot>默认的点赞</slot>-->
      <!--<slot name="after-text">默认的点赞</slot>-->
    </div>
  </div>
</template>

<script>
export default {
  name: 'feature-component',
  props: {
    zanData: {
      type: Object,
      default: () => ({})
    },
  },
  methods: {
    dianZan(id) {
      // 自定义事件
      // setData()
      this.$emit('state', id)
      // console.log(id)
      // console.log(this.isZan)
      // console.log(this.count)
      /*if (this.isZan) {
        this.isZan = false
        this.count -= 1
      } else {
        this.isZan = true
        this.count += 1
      }*/
    }
  }
}
</script>

<style lang="scss">
.feature {
  border: 1px solid #20a2f7;

  .zan {
    font-size: 30px;

    .red {
      color: #f00;
    }
  }
}
</style>
